@extends('layouts.admin')
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/backstage.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/index.css') }}" />
    <style type="text/css">
        #gloTop .logo {
            height: 42px;
            line-height: 42px;
            width: 140px;
            font-size: 20px;
            font-weight:600;
            color: #fff;
            text-align: center;
            padding:4px 5px;
            margin-left: 0;
        }
    </style>
@endsection
@section('content')
    <div id="gloBox" class="">
        <div id="gloTop" class="clearfix">
            <div class="gtLeft clearfix">
                <div class="logo">验单单管理系统</div>
                <div class="menuBar" >
                    <ul class="list">
                        <li class="bar_line bar_top"></li>
                        <li class="bar_line bar_mid"></li>
                        <li class="bar_line bar_foot"></li>
                    </ul>
                </div>
            </div>
            <div class="layui-tab layui-tab-brief top-menu-tab" >
                <ul class="layui-tab-title" style="height:100%">
                    @foreach($top_menus as $top)
                        <li data-id="{{ $top['id'] }}" @if($loop->first) class="layui-this" @endif><i class="fa {{ $top['icon'] }}"></i><cite>{{ $top['title'] }}</cite></li>
                    @endforeach
                </ul>
            </div>
            <div class="gtRght">
                <ul class="layui-nav list" lay-filter="">
                    {{--<li class="layui-nav-item circle gohome first"><a class="tooltip" data-tip-text="访问前台" data-tip-type="3" href="{{ url('/') }}" target="_blank"><i class="fa fa-home"></i></a></li>--}}
                     <li class="layui-nav-item circle"><a class="tooltip javascript" rel="full_screen" data-tip-text="F11全屏" data-tip-type="3" href="javascript:void(0);"><i class="fa fa-arrows "></i></a></li>
                     <li class="layui-nav-item circle skin-down"><a  href="javascript:void(0);"><i class="fa fa-yelp" style="margin: -7px 0 0 -6px;"></i></a>
                        <div class="skin-show clearfix">
                            <a data-skin="default" rel="change_skin"  style="background: #009688;" class="javascript"></a>
                            <a data-skin="green" rel="change_skin"  style="background: rgba(0,166,90,1);" class="javascript"></a>
                            <a data-skin="pink"  rel="change_skin" style="background: rgba(250,96,134,1);" class="javascript"></a>
                            <a data-skin="blue"  rel="change_skin" style="background: rgba(0,192,239,1);" class="javascript"></a>
                            <a data-skin="red"   rel="change_skin" style="background: rgba(250,42,0,1);" class="javascript"></a>
                        </div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:void(0)" class="admin-user" >
                            <span class="admin-user-headpic"><img  src="{{ $user->avatar }}" alt=""/></span><span class="admin-user-name en-font">欢迎！</span>
                        </a>
                        <dl class="layui-nav-child">
                            <i class="i"></i>
                            <dd><a href="{{ url('userinfo') }}" class="javascript" rel="modifyUserinfo" data-icon="fa-user"><i class="fa fa-pencil" aria-hidden="true"></i>资料修改</a></dd>
                            <dd><a href="{{ url('password') }}" class="javascript" rel="modifyPassword" data-icon="fa-user"><i class="fa fa-key" aria-hidden="true"></i>修改密码</a></dd>
                            <dd><a href="" class="javascript" rel="lockScreen"><i class="fa fa-lock" aria-hidden="true" style="padding-right: 2px;padding-left: 2px;"></i>锁屏(Alt+L)</a></dd>
                            <dd class="bt"><a href="{{ url('logout') }}" class="javascript" rel="logout"><i class="fa fa-sign-out" aria-hidden="true"></i>注销登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div id="gloLeft" class="sizing">
            <div class="leftbg"></div>
            <div id="leftBar">
                @foreach($left_menus as $key => $lmenus)
                    <ul class="list gloMenu @if($loop->first) layui-show @endif "  data-id="{{ $key }}" id="gloMenu_{{ $key }}">
                        @foreach($lmenus as $key1=>$lmenu1)
                            @continue($lmenu1['is_menu']==0)
                            <li>
                                <div class="navT">
                                    <a href="{{ $lmenu1['href'] }}"><i data-icon="{{ $lmenu1['icon'] }}" data-tip-text="{{ $lmenu1['title'] }}" class="tooltip fa  {{ $lmenu1['icon'] }} animated" style="color: rgb(113,143,63); "></i><cite>{{ $lmenu1['title'] }}</cite></a>
                                </div>
                                @if(isset($lmenu1['children']))
                                    <div class="navC">
                                        <ul class="list">
                                            @foreach($lmenu1['children'] as $lmenu2)
                                                @continue($lmenu2['is_menu']==0)
                                                <li class="b"><a href="{{ $lmenu2['href'] }}"><i data-icon="{{ $lmenu2['icon'] }}" class="fa fa-angle-right fa-lg animated"></i><cite>{{ $lmenu2['title'] }}</cite></a></li>
                                                <li class="s"><a href="{{ $lmenu2['href'] }}" class="tooltip" data-tip-text="{{ $lmenu2['title'] }}" data-tip-bg="#009688" data-title="{{ $lmenu2['title'] }}" data-icon="{{ $lmenu2['icon'] }}"><i class="fa {{ $lmenu2['icon'] }}"></i></a></li>
                                            @endforeach
                                       </ul>
                                    </div>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
        </div>
        <div id="gloRght" class="layui-body">
            <div class="layui-tab admin-nav-card"  id="larry-tab" lay-filter="bodyTab"  >
                <ul class="layui-tab-title top_tab" id="top_tabs">
                    <li class="layui-this" lay-id=""><i class="larry-icon larry-houtaishouye"></i> <cite>后台首页</cite></li>
                    <li class="" lay-id="" style="background:orange;color:#fff;"><i class="larry-icon larry-houtaishouye"></i> <cite>账号验证</cite></li>
                </ul>
                <div class="larry-title-box" style="height: 41px;" >
                    <div class="go-left key-press pressKey" id="titleLeft" title="滚动至最右侧"><i class="fa fa-angle-double-left fa-2x"></i> </div>
                    <div class="title-right" id="titleRbox">
                        <div class="go-right key-press pressKey" id="titleRight" title="滚动至最左侧"><i class="fa fa-angle-double-right fa-2x"></i></div>
                        <div class="refresh key-press" id="refresh_iframe"><i class="fa fa-refresh"></i><cite>刷新</cite></div>

                        <div class="often key-press">
                            <ul class="layui-nav posr">
                                <li class="layui-nav-item posb">
                                    <a class="top"><i class="fa fa-hand-o-up"></i><cite>常用操作</cite><span class="layui-nav-more"></span></a>
                                    <dl class="layui-nav-child">
                                        <dd>
                                            <a href="javascript:void(0)" class="closeCurrent"><i class="fa fa-window-close"></i>关闭当前选项卡</a>
                                        </dd>
                                        <dd>
                                            <a href="javascript:void(0)" class="closeOther"><i class="fa fa-window-close-o"></i>关闭其他选项卡</a>
                                        </dd>
                                        <dd>
                                            <a href="javascript:void(0)" class="closeAll"><i class="fa fa-close"></i>关闭全部选项卡</a>
                                        </dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-content clildFrame" style="height:793px;">
                    <div class="layui-tab-item layui-show layui-anim layui-anim-upbit">
                        <iframe src="{{ url('dashboard') }}" width="100%" height="100%" style="min-width:960px;height:100%" scrolling="auto" data-id="0" name="ifr_0" id="ifr_0"></iframe>
                    </div>
                    <div class="layui-tab-item layui-anim layui-anim-upbit">
                        <iframe src="{{ url('account/check') }}" width="100%" height="100%" style="min-width:960px;height:100%" scrolling="auto" data-id="1" name="ifr_1" id="ifr_1"></iframe>
                    </div>
                </div>
            </div>
            <div class="layui-footer footer layui-larry-foot">
                <div class="layui-main">
                    <p>{{ $configs['web_copyright']['value'] }}</p>
                </div>
            </div>
        </div>
    </div>
    <div id="lockScreen" >
        <div class="init">
            <div class="relative">
                <div class="lockTime en-font"></div>
                <div class="pic"><img  src="{{ $user->avatar }}" alt=""/><p class="en-font">欢迎！</p></div>
            </div>
            <div class="wrbox">
                <input  type="password" id="screenPwd" class="wrin" value="" autocomplete="off" placeholder="请输入密码解锁.."/><br /><button id="closeLock" class="layui-btn">立即解锁</button>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        var Tab,layer;
        layui.use(['element','jquery','bodyTab','utils'], function(){
            var element = layui.element;
            var bodyTab = layui.bodyTab;
            layer = layui.layer;
            var $ = layui.$;
            var URL = layui.utils.URL;
            Tab = bodyTab();
            $('.top-menu-tab li').on('click',function(){
                $(".gloMenu").removeClass('layui-show');
                var menu_id = $(this).data('id');
                $("#gloMenu_"+menu_id).addClass('layui-show');
            })

            $('.gloMenu li').each(function(){
                var childLen  = $(this).find('.navC').find('li').length;
                if(childLen) {
                    var html = $(this).find('.navT').find('a').html();
                    $(this).find('.navT').html('<span>'+html+'</span>') ;
                }
            })
            $('.gloMenu').on('click','.navT',function(){
                var parent  = $(this).closest('li');
                var index   = parent.index();
                if(parent.find('.navC').find('li').length){
                    if(parent.hasClass('open')){
                        parent.find('.navC').stop(true).slideUp(300,function(){ parent.removeClass('open')}) ;
                    }else{
                        var openLi  = $(this).find('li.open') ;
                        openLi.removeClass('open').find('.navC').stop(true).slideUp(300) ;
                        parent.addClass('open').find('.navC').stop(true).slideDown(300) ;
                    }
                }
            })

            $('.gloMenu').on('click','a',function(){
                var href  = $(this).attr('href');
                $(this).attr('data-url',href);
                $('.gloMenu').find('a.current').removeClass('current');
                $(this).addClass('current') ;
                Tab.tabAdd($(this));
                return false ;
            })
            $('#gloTop').find('.menuBar').click(function(){
                if($('#gloBox').hasClass('menu_close')){
                    $('#gloBox').removeClass('menu_close') ;
                }else{
                    $('#gloBox').addClass('menu_close') ;
                }
            })

            $('.skin-down').hover(function(){
                $(this).find('.skin-show').stop(true,true).slideDown(300);
            },function(){
                $(this).find('.skin-show').stop(true,true).slideUp(300);
            })

            /**关闭当前*/
            $(".closeCurrent").on("click",function(){
                if($("#top_tabs li").length>1 && $("#top_tabs li.layui-this cite").text()!="后台首页"){
                    var menu = JSON.parse(window.sessionStorage.getItem("menu"));
                    $("#top_tabs li").each(function(){
                        if($(this).attr("lay-id") != '' && $(this).hasClass("layui-this")){
                            element.tabDelete("bodyTab",$(this).attr("lay-id")).init();
                            //此处将当前窗口重新获取放入session，避免一个个删除来回循环造成的不必要工作量
                            for(var i=0;i<menu.length;i++){
                                if($("#top_tabs li.layui-this cite").text() == menu[i].title){
                                    menu.splice(0,menu.length,menu[i]);
                                    window.sessionStorage.setItem("menu",JSON.stringify(menu));
                                }
                            }
                        }
                    });
                }else{
                    top.layer.msg('首页不能关闭',{icon: 0});
                }
            });

            /**关闭其他*/
            $(".closeOther").on("click",function(){
                if($("#top_tabs li").length>2 && $("#top_tabs li.layui-this cite").text()!="后台首页"){
                    var menu = JSON.parse(window.sessionStorage.getItem("menu"));
                    $("#top_tabs li").each(function(){
                        if($(this).attr("lay-id") != '' && !$(this).hasClass("layui-this")){
                            element.tabDelete("bodyTab",$(this).attr("lay-id")).init();
                            //此处将当前窗口重新获取放入session，避免一个个删除来回循环造成的不必要工作量
                            for(var i=0;i<menu.length;i++){
                                if($("#top_tabs li.layui-this cite").text() == menu[i].title){
                                    menu.splice(0,menu.length,menu[i]);
                                    window.sessionStorage.setItem("menu",JSON.stringify(menu));
                                }
                            }
                        }
                    });
                }else if($("#top_tabs li.layui-this cite").text()=="后台首页" && $("#top_tabs li").length>1){
                    $("#top_tabs li").each(function(){
                        if($(this).attr("lay-id") != '' && !$(this).hasClass("layui-this")){
                            element.tabDelete("bodyTab",$(this).attr("lay-id")).init();
                            window.sessionStorage.removeItem("menu");
                            menu = [];
                            window.sessionStorage.removeItem("curmenu");
                        }
                    })
                }else{
                    top.layer.msg('没有可关闭的窗口',{icon: 0});
                }
            });
            /**关闭全部*/
            $(".closeAll").on("click",function(){
                if($("#top_tabs li").length > 1 ){
                    $("#top_tabs li").each(function(){
                        if($(this).attr("lay-id") != ''){
                            element.tabDelete("bodyTab",$(this).attr("lay-id")).init();
                            window.sessionStorage.removeItem("menu");
                            menu = [];
                            window.sessionStorage.removeItem("curmenu");
                        }
                    })
                }else{
                    top.layer.msg('没有可关闭的窗口',{icon: 0});
                }
            })

            $('#refresh_iframe').on('click', function () {
                $("#gloRght .layui-tab-content .layui-tab-item").each(function () {
                    if ($(this).hasClass('layui-show')) {
                        $(this).children('iframe')[0].contentWindow.location.reload(true)
                    }
                })
            });

            //同时按下alt+L锁屏
            document.onkeydown = function(event){
                if (event.keyCode == 76 && event.altKey){
                    lockScreen()
                }
            }
            $('#screenPwd').keyup(function(event){
                if (event.keyCode == 13) {
                    $('#closeLock').trigger('click');
                }
            })

            $('#closeLock').click(function(){
                var url = "{{ url('unlock') }}";
                var pwd = $.trim($('#screenPwd').val());
                if (!pwd) {
                    layer.msg('请先输入密码');
                    return false;
                }
                URL.post(url,{password:pwd},{
                    dataType:'json',
                    success:function(res){
                        if(res.code==1){
                            layer.closeAll();
                            $('#lockScreen').fadeOut(300);
                        }else{
                            layer.msg(res.message,{icon:5,time:2000});
                        }
                    }
                })
            })
            //resize
            $(window).resize(function(){
                winWidth = $(window).width();
                heiHeght = $(window).height();
                $('#gloRght').height(heiHeght - 51);
                $('#gloLeft,#gloSLeft').css('height',(heiHeght - 51) + 'px')
                $('.layui-tab-content').height(heiHeght - 51 - 40);
            }).trigger('resize')

            $('.tab-prev').unbind('click').bind('click',function(){
                var left    = $('.layui-tab-title').position().left ;
                left  = left+117 <0 ? left+117 :0 ;
                $('.layui-tab-title').stop(true).animate({ left : left },500);
            })

            $('.tab-next').unbind('click').bind('click',function(){
                var left    = $('.layui-tab-title').position().left ;
                var boxWid  = $('.layui-tab-title').width() ;
                var liWid   = 0;
                $('.layui-tab-title').children('span').remove().end().find('li').each(function(){
                    liWid += $(this).outerWidth() ;
                })
                left  = left-117 > -(liWid-boxWid) ? left-117 :-(liWid-boxWid);
                if(left>0)left =  0;
                $('.layui-tab-title').stop(true).animate({ left : left },500);
            })
        })
        function change_skin(){
            var skin  = $(this).attr('data-skin');
            $('#gloBox').removeClass().addClass(skin);
        }
        function full_screen(){
            var docElm = document.documentElement;
            //W3C
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
        }
        function logout(){
            var url = $(this).prop('href');
            layui.config({base:'/js/'}).use('common',function(){
                var common = layui.common;
                common.logOut('退出登陆提示', '你真的确定要退出系统吗？', url);
            })
        }
        //锁屏
        function lockScreen(){
            if($('#lockScreen').is(':visible')) return false ;
            $('#screenPwd').val('');
            $('#lockScreen').fadeIn(300, function(){
                $('#closeLock').addClass('shake');
            })
        }
    </script>
@endsection